<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DataTables Scroller - SpringMVC 示例</title>

    <link rel="stylesheet"
          href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet"
          href="https://cdn.datatables.net/scroller/2.3.0/css/scroller.dataTables.min.css"/>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/scroller/2.3.0/js/dataTables.scroller.min.js"></script>
</head>
<body>
<h2 style="text-align:center;">DataTables Scroller 示例</h2>

<table id="scrollTable" class="display" style="width:80%; margin:0 auto;">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
    </tr>
    </thead>
</table>

<script>
    $(document).ready(function() {
        $('#scrollTable').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: '${pageContext.request.contextPath}/userData',
                type: 'POST'
            },
            deferRender: true,
            scrollY: 500,
            scrollCollapse: true,
            scroller: true,
            columns: [
                { data: 'id' },
                { data: 'name' },
                { data: 'email' }
            ],
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/zh.json'
            }
        });
    });
</script>
</body>
</html>
